import React from 'react'
import Tab from '../common/Tab'

const Index = () => {
    // 文章数据
    const [list, setList] = React.useState([])

    // 轮播数据
    const [CateList, setCateList] = React.useState([])

    // 合并数据
    const CateData = React.useRef([])

    // 上拉状态
    const [finished, setFinished] = React.useState(false)

    // 懒加载状态
    const [loading, setLoading] = React.useState(false)

    // 分页页码
    const page = React.useRef(1)

    // 请求轮播数据
    const getCateData = async () => {
        let result = await React.$Api.CateSwiper()
        // console.log(result);
        if (result) {
            if (result.code === 1) {
                setCateList(result.data)
            }
        }
    }

    React.useEffect(() => {
        getCateData()
    }, [])

    // 下拉刷新方法
    const refresh = () => {
        CateData.current = []
        setList([])
        page.current = 1
        setFinished(false)

        return new Promise((resolve) => {
            setTimeout(() => {
                React.$Vant.Toast.info('刷新成功')
                resolve(true)
            }, 1000)
        })
    }

    // 上拉加载数据方法
    const load = () => {
        getList()
        setLoading(true)
    }

    const getList = async () => {

        setFinished(true)

        let data = {
            page: page.current
        }

        let result = await React.$Api.CateIndex(data)

        if (result) {
            if (result.code === 1) {
                CateData.current = CateData.current.concat(result.data)

                setList(CateData.current)

                page.current = page.current + 1

                setFinished(false)
            } else {
                React.$Vant.Toast.info(result.msg)
                setFinished(true)
                return false
            }
        }
    }

    // 文章列表
    const Items = () => {
        return list.map((item, index) => {
            return (
                <li key={index}>
                    <React.$Router.NavLink to={"/category/category/info?id=" + item.id}>
                        <img src={item.image_cdn} alt="" />
                        <p>{item.name}</p>
                        <span>{item.createtime_text}</span>
                    </React.$Router.NavLink>
                </li>
            )
        })
    }

    const CateSwiper = () => {
        if (CateList.length > 0) {
            return (
                <React.$Vant.Swiper>
                    {CateList.map((item, index) => {
                        return (
                            <React.$Vant.Swiper.Item key={index}>
                                <React.$Router.NavLink to={`/category/category/info?id=${item.id}`}>
                                    <img src={item.image_cdn} alt="" style={{ height: '220px', objectFit: 'cover' }} />
                                </React.$Router.NavLink>
                            </React.$Vant.Swiper.Item>
                        )
                    })}
                </React.$Vant.Swiper>
            )
        }
    }

    return (
        <>

            <React.$Vant.Sticky>
                <React.$Vant.NavBar
                    title='学术'
                    leftArrow={false}
                />
            </React.$Vant.Sticky>

            <div className='banner_shouy'>
                <CateSwiper />
            </div>

            {/* 文章列表 */}
            <React.$Vant.PullRefresh
                onRefresh={refresh}
            >
                <React.$Vant.List className="catelist" finished={finished} onLoad={load} offset={5} loading={loading} autoCheck={false}>
                    <div className='lest_xs'>
                        <ul>
                            <Items />
                        </ul>
                    </div>
                </React.$Vant.List>
            </React.$Vant.PullRefresh>

            <div style={{ height: ".75rem" }}></div>

            <Tab />
        </>
    )
}

export default Index